<template>
      <div>
        <!-- 通过visible.sync来控制展现与否，是个boolean值 -->
        <el-dialog title="添加电影" :visible.sync="addflag" >
          <!-- 表单的内容，里面的每一个控件都有一个el-form-item的栏目格式用来规定label以及位置 -->
          <div>
            <el-form label-width="80px">
              <el-form-item label="电影名称">
                <el-input v-model="editMovie.movieName" clearable></el-input>
              </el-form-item>
              <el-form-item label="电影简介">
                <el-input v-model="editMovie.message" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="电影时长">
                <el-input v-model="editMovie.timelength"></el-input>
              </el-form-item>
              <el-form-item label="演员">
                <el-input v-model="editMovie.movieActors"></el-input>
              </el-form-item>
              <el-form-item label="上映时间">
                <el-date-picker v-model="editMovie.startTime" type="date"
                                placeholder="选择上映日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="下映时间">
                <el-date-picker v-model="editMovie.endTime" type="date"
                                placeholder="选择下映日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="海报">
                <el-upload
                    class="upload-demo"
                    action="http://localhost:8080/file/upload"
                    list-type="picture"
                    :on-success="successFile"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
          <!-- 弹出框底部的两个按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="toNull()">重 置</el-button>
            <el-button type="primary"  @click="addM">提 交</el-button>
          </div>
        </el-dialog>

        <!--                movieId:null,-->
        <!--                movieName:null,-->
        <!--                movieImg:null,-->
        <!--                message:null,-->
        <!--                startTime:null,-->
        <!--                realprice:null,-->
        <!--                timelength:null,-->
        <!--                movieActors:null,-->
        <!--                endTime:null,-->
        <!--                status:null,-->
        <!--                upstatus:null-->
        <el-dialog title="更新电影" :visible.sync="editflag" >
          <!-- 表单的内容，里面的每一个控件都有一个el-form-item的栏目格式用来规定label以及位置 -->
          <div>
            <el-form label-width="80px">
              <el-form-item label="电影名称">
                <el-input v-model="editMovie.movieName" clearable></el-input>
              </el-form-item>
              <el-form-item label="电影简介">
                <el-input v-model="editMovie.message" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="电影时长">
                <el-input v-model="editMovie.timelength"></el-input>
              </el-form-item>
              <el-form-item label="电影定价">
                <el-input v-model="editMovie.realprice"></el-input>
              </el-form-item>
              <el-form-item label="演员">
                <el-input v-model="editMovie.movieActors"></el-input>
              </el-form-item>
              <el-form-item label="上映时间">
                <el-date-picker v-model="editMovie.startTime" type="date"
                                placeholder="选择上映日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="下映时间">
                <el-date-picker v-model="editMovie.endTime" type="date"
                                placeholder="选择下映日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>

            </el-form>
          </div>
          <!-- 弹出框底部的两个按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="toNull2()">关 闭</el-button>
            <el-button type="primary"  @click="editMoviego">提 交</el-button>
          </div>
        </el-dialog>

        <el-button type="primary" @click="addflag=!addflag">新增</el-button>
        <el-button type="danger" :disabled="dele.ids.length<=0" @click="del">删除</el-button>

        <el-input v-model="movieLikeGetsParam.likeName" clearable style="width:200px" placeholder="请输入内容"></el-input>
        <el-select v-model="movieLikeGetsParam.statu" clearable placeholder="请选择">

          <el-option
              label="未上架"
              value="0">
          </el-option>
          <el-option
              label="已上架"
              value="1">
          </el-option>
        </el-select>
        <el-button type="primary" @click="getMovies">查找</el-button>

        <el-table
            :data="movies"
            style="width: 100%"
            @selection-change="select">
          <el-table-column
              type="selection"
              width="55"

          >
          </el-table-column>


          <el-table-column
              prop="movieId"
              label="id"
              width="60">
          </el-table-column>
          <el-table-column
              prop="movieName"
              label="电影名"
              width="70">
          </el-table-column>

          <el-table-column
              prop="realprice"
              label="电影定价"
              width="100"
          >
          </el-table-column>
          <el-table-column
              prop="timelength"
              label="电影时长"
              width="100"
          >
          </el-table-column>
          <el-table-column
              prop="movieActors"
              label="电影演员"
              width="100"
          >
          </el-table-column>
          <el-table-column label="电影海报"
                           width="85">
            <template slot-scope="scope">
              <img v-if="scope.row.movieImg!=null" :src="scope.row.movieImg" width="80" height="80">
            </template>
          </el-table-column>
          <el-table-column
              :formatter="timeFormat"
              prop="startTime"
              label="电影上映时间"
              width="100"
          >
          </el-table-column>
          <el-table-column
              :formatter="timeFormat"
              prop="endTime"
              label="电影下映时间"
              width="100"
          >
          </el-table-column>
          <el-table-column
              :formatter="statuFormat"
              prop="status"
              label="电影上映状态"
              width="100"
          >
          </el-table-column>


          <el-table-column label="操作"
                           width="300">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status==0" @click="changeup(0,scope.row.movieId)" type="success" round>上架</el-button>
              <el-button v-if="scope.row.status==1" @click="changeup(1,scope.row.movieId)" type="info" round>下架</el-button>
              <el-button @click="getOne(scope.row.movieId)" type="warning" icon="el-icon-edit" circle ></el-button>
              <el-button @click="delOne(scope.row.movieId)" type="danger" icon="el-icon-delete" circle ></el-button>
            </template>
          </el-table-column>


        </el-table>
        <div class="block">
          <el-pagination
              layout="prev, pager, next"
              :total="total" :page-size="movieLikeGetsParam.pageSize"
              :current-page="movieLikeGetsParam.pageIndex"
              @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </div>
</template>

<script>
export default {
  name: "movieHome",
  data(){
    return{
      movieLikeGetsParam:{
        likeName:null,
        statu:null,
        pageIndex:null,
        pageSize:5
      },
      statuMessage:["未上架","已上架"],
      statuchange:["上架","下架"],
      upstatuMessage:["未上映","已上映"],
      movies:[],
      total:null,
      addMovie:{
        movieImg:null,
        movieName:null,
        message:null,
        movieActors:null,
        realprice:null,
        timelength:null,
        startTime:null,
        endTime:null
      },
      editMovie:{
        movieId:null,
        movieName:null,
        movieImg:null,
        message:null,
        startTime:null,
        realprice:null,
        timelength:null,
        movieActors:null,
        endTime:null,
        status:null,
        upstatus:null
      },
      dele:{
        ids:[]
      },
      editflag:false,
      addflag:false

    }
  },
  methods:{
    toNull(){
      this.addMovie={
        movieName:null,
        message:null,
        movieActors:null,
        realprice:null,
        timelength:null,
        startTime:null,
        endTime:null
      }

    },
    toNull2(){
      this.editMovie={
        movieId:null,
        movieName:null,
        movieImg:null,
        message:null,
        startTime:null,
        realprice:null,
        timelength:null,
        movieActors:null,
        endTime:null,
        status:null,
        upstatus:null
      }
      this.editflag=false;
    },
    successFile(resp,f,f2){
      this.addMovie.movieImg=resp.object;
    },
    timeFormat(r,c,v){
      if (v!=null&&v!=undefined)
        return v.split(" ")[0]
    },
    statuFormat(r,c,v){
      return v==0?"未上架":"已上架";
    },
    getMovies(){
      this.$http.post("/movie/like",this.movieLikeGetsParam).then(
          (resp)=>{
            if (resp.data.code==20000){
              this.movies= resp.data.object.moviesDtos;
              this.movieLikeGetsParam.pageIndex=resp.data.object.pageIndex;
              this.total=resp.data.object.total;
              this.dele.ids=[];
            }
          }
      )
    },
    select(row) {
      this.dele.ids=[];
      console.log(row)
      for (let i = 0; i < row.length; i++) {
        this.dele.ids.push(row[i].movieId)
      }

      console.log(this.dele.ids)
    },
    pageChange(p){
      this.movieLikeGetsParam.pageIndex=p;
      this.getMovies();
    },
    del(){
      function s(a,b) {
        return b-a;
      }
      this.dele.ids.sort(s);

      this.$http.post("/movie/deletes",this.dele).then(
          (resp)=>{
            if (resp.data.code==20000){
              this.getMovies();
              this.dele.ids=[];
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
            else{
              this.$message({
                message: '删除失败',
                type: 'warning'
              });
            }
          }
      )
    },
    delOne(id){
      this.$http.get("/movie/delete/"+id).then(
          (resp)=>{
            if (resp.data.code==20000){

              this.getMovies();
              this.dele.ids=[];
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }else{
              this.$message({
                message: '删除失败',
                type: 'warning'
              });
            }
          }
      )
    },
    editMoviego(){
      this.$http.post("/movie/update",this.editMovie).then(
          (resp)=>{
            if (resp.data.code==20000){
              this.getMovies();
              this.toNull2();
              this.editflag=false;
              this.$message({
                message: '更改成功',
                type: 'success'
              });
            }
          }
      )
    },
    addM(){
      this.$http.post("/movie/save",this.addMovie).then(
          (resp)=>{
            if (resp.data.code==20000){
              this.addflag=false;
              this.movieLikeGetsParam.likeName=null;
              this.movieLikeGetsParam.pageIndex=1;
              this.getMovies();
              this.$message({
                message: '新增成功',
                type: 'success'
              });
            }
          }
      )
    },
    getOne(id){
      this.$http.get("/movie/sel/"+id).then(
          (resp)=>{
            if (resp.data.code==20000){
              this.editflag=true;
              this.editMovie=resp.data.object;

              if(this.editMovie.startTime!=null){
                this.editMovie.startTime = this.editMovie.startTime.split(" ")[0];
              }
              if(this.editMovie.endTime!=null){
                this.editMovie.endTime = this.editMovie.endTime.split(" ")[0];
              }
              console.log(this.editMovie);
              this.getMovies();

            }else{
              this.$message({
                message: '查无此影',
                type: 'warring'
              });
            }
          }
      )
    },
    changeup(now,id){
      if(now==0){
        this.$http.get("/movie/up/"+id).then(
            (resp)=>{
              if (resp.data.code==20000){
                this.$message({
                  message: resp.data.message,
                  type: 'success'
                });
              }else{
                this.$message({
                  message: resp.data.message,
                  type: 'warring'
                });
              }
              this.getMovies();
            }
        )
      }
      else{
        this.$http.get("/movie/down/"+id).then(
            (resp)=>{
              if (resp.data.code==20000){
                this.$message({
                  message: resp.data.message,
                  type: 'success'
                });
                this.getMovies();
              }else{
                this.$message({
                  message: resp.data.message,
                  type: 'warring'
                });
              }
            }
        )
      }
    }

  },
  created(){
    this.movieLikeGetsParam.pageIndex=1;
    this.getMovies();
  }
}
</script>

<style scoped>

</style>